<template>
	<view class="exchange-page">
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="(order, index) in orders" :key="index">
				<!-- 订单号 -->
				<text class="order-number">订单号: {{ order.orderNumber }}</text>
				
				<!-- 商品信息区域上方的水平线 -->
				<view class="divider"></view>
				
				<!-- 商品信息区域 -->
				<view class="product-section">
					<!-- 单个商品显示 -->
					<view v-if="order.products.length === 1" class="single-product">
						<image :src="order.products[0].imageUrl" class="product-image single"></image>
						<view class="product-info">
							<text class="product-name">{{ order.products[0].name }}</text>
							<text class="product-specs">{{ order.products[0].specs }}</text>
						</view>
					</view>
					
					<!-- 多个商品显示 -->
					<view v-else class="multiple-products">
						<image 
							v-for="(product, pIndex) in order.products" 
							:key="pIndex"
							:src="product.imageUrl" 
							class="product-image multiple"
						></image>
					</view>
				</view>
				
				<!-- 订单汇总和操作 -->
				<view class="order-summary">
					<!-- 商品数量和价格 -->
					<text class="total-info">
						共{{ order.totalItems }}件商品 {{ order.paymentType }}: ¥{{ order.totalPrice }}
					</text>
					
					<!-- 合计价格下方的水平线 -->
					<view class="divider"></view>
					
					<!-- 操作区域 -->
					<view class="action-section">
						<view class="status-container">
							<!-- 左侧状态显示 -->
							<text v-if="order.isExpired" class="expired-status">已过售后期</text>
						</view>
						
						<!-- 申请换货按钮 -->
						<view class="button-container">
							<button 
								@click="applyExchange(order.orderNumber)" 
								:disabled="order.isExpired"
								:class="{ 'exchange-btn': true, 'disabled': order.isExpired }"
							>
								申请换货
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [
					{
						orderNumber: '948139532',
						totalItems: 1,
						totalPrice: 21,
						paymentType: '合计',
						isExpired: false,
						products: [
							{
								imageUrl: '/static/c3.png',
								name: '甜美V领荷叶袖T恤',
								specs: '商品属性规格'
							}
						]
					},
					{
						orderNumber: '241122713',
						totalItems: 1,
						totalPrice: 27,
						paymentType: '合计',
						isExpired: true,
						products: [
							{
								imageUrl: '/static/c1.png',
								name: '商品名称',
								specs: '商品属性规格'
							},
							{
								imageUrl: '/static/c2.png',
								name: '商品名称',
								specs: '商品属性规格'
							},
							{
								imageUrl: '/static/c3.png',
								name: '商品名称',
								specs: '商品属性规格'
							}
						]
					}
				]
			}
		},
		methods: {
			applyExchange(orderNumber) {
				// 处理申请换货逻辑
				console.log(`申请换货：订单号 ${orderNumber}`);
				
				// 跳转到换货申请页面
				uni.navigateTo({
					url: '/pages/yzmHReturnRequest/yzmHReturnRequest'
				});
			}
		}
	}
</script>

<style>
page {
	background-color: #f5f5f5;
}

.exchange-page {
	min-height: 100vh;
	padding: 15px;
}

.order-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.order-item {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 订单号 */
.order-number {
	font-size: 16px;
	color: #333;
	font-weight: 500;
	margin-bottom: 12px;
	display: block;
}

/* 水平分割线 */
.divider {
	height: 1px;
	background-color: #eee;
	margin: 15px 0; /* 上下间距 */
}

/* 商品信息区域 */
.product-section {
	margin-bottom: 15px;
}

/* 单个商品显示 */
.single-product {
	display: flex;
	align-items: center;
}

.product-image.single {
	width: 80px;
	height: 80px;
	border-radius: 4px;
	margin-right: 12px;
	object-fit: cover;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.product-name {
	font-size: 14px;
	color: #333;
	line-height: 1.4;
}

.product-specs {
	font-size: 12px;
	color: #999;
	line-height: 1.4;
}

/* 多个商品显示 */
.multiple-products {
	display: flex;
	gap: 8px;
}

.product-image.multiple {
	width: 60px;
	height: 60px;
	border-radius: 4px;
	object-fit: cover;
}

/* 订单汇总和操作 */
.order-summary {
	display: flex;
	flex-direction: column;
}

.total-info {
	font-size: 14px;
	color: #333;
	margin-bottom: 12px;
	text-align: right;
}

.action-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.status-container {
	flex: 1;
}

.expired-status {
	color: #ff4757;
	font-size: 14px;
	font-weight: 500;
}

/* 按钮容器 */
.button-container {
	flex-shrink: 0;
}

/* 申请换货按钮 */
.exchange-btn {
	background-color: #007aff;
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s;
	width: 80px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.exchange-btn:hover:not(:disabled) {
	background-color: #0056cc;
}

.exchange-btn.disabled {
	background-color: #ccc !important;
	color: #999 !important;
	cursor: not-allowed;
}

.exchange-btn.disabled:hover {
	background-color: #ccc !important;
	color: #999 !important;
}
</style>